import { Area } from "@ant-design/charts";
import { ProDescriptions } from "@ant-design/pro-components";
import { Tag } from "antd";

import React from "react";

const DescriptionsPage: React.FC = () => {
  const dataSource = {
    id: 1,
    name: "张三",
    email: "zhangsan@example.com",
    phone: "13800138000",
    address: "北京市朝阳区某某街道123号",
    department: "技术部",
    position: "前端工程师",
    status: "active",
    joinDate: "2023-01-15",
    salary: 15000,
  };

  const config = {
    data: {
      type: "fetch",
      value: "https://assets.antv.antgroup.com/g2/aapl.json",
    },
    xField: (d) => new Date(d.date),
    yField: "close",
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>用户详情</h1>
      <Area {...config} />

      <ProDescriptions
        dataSource={dataSource}
        columns={[
          {
            title: "姓名",
            dataIndex: "name",
          },
          {
            title: "邮箱",
            dataIndex: "email",
          },
          {
            title: "电话",
            dataIndex: "phone",
          },
          {
            title: "地址",
            dataIndex: "address",
            span: 2,
          },
          {
            title: "部门",
            dataIndex: "department",
          },
          {
            title: "职位",
            dataIndex: "position",
          },
          {
            title: "状态",
            dataIndex: "status",
            render: (status: string) => (
              <Tag color={status === "active" ? "green" : "red"}>
                {status === "active" ? "在职" : "离职"}
              </Tag>
            ),
          },
          {
            title: "入职时间",
            dataIndex: "joinDate",
          },
          {
            title: "薪资",
            dataIndex: "salary",
            render: (salary: number) => `¥${salary}`,
          },
        ]}
      />
    </div>
  );
};

export default DescriptionsPage;
